<template>
  <div class="testbox entestbox clmstart">
    <p class="title">
      Surface morphology of different<br />
      panels after phosphating treatment
    </p>
    <div class="areabox area1 clmcenter">
      <div class="imgarea clmcenter">
        <p>SEM imaging</p>
        <img
          :src="require(`@/assets/img/CN/itemH/s1g${active}.png`)"
          class="gimg"
          v-if="active != 0"
        />
      </div>
    </div>
    <!-- tips -->
    <p class="tips" v-if="active != 0">{{ info[active - 1].tips }}</p>
    <!-- 放置处 -->
    <div class="table table1" ref="table">
      <img
        src="@/assets/img/EN/itemH/s1t0.png"
        class="timg"
        v-if="active == 0"
      />
      <img
        :src="require(`@/assets/img/CN/itemH/s1t${active}.png`)"
        class="timg"
        v-else
      />
    </div>
    <!-- 基础材料 -->
    <div class="basebox basebox1" ref="pbox" v-show="!ispc">
      <img
        :src="item.img"
        v-for="(item, index) in info"
        :key="item.id"
        :class="[`baseimg base${index + 1}`]"
        v-show="!item.isactive"
        :style="{ marginTop: -item.top + 'px', marginLeft: item.left + 'px' }"
        @touchstart="dragStart($event)"
        @touchmove="dragMove($event, item.id)"
        @touchend="dragEnd($event, item.id)"
      />
    </div>
    <!-- 基础材料 -->
    <div class="basebox basebox1" v-show="ispc">
      <img
        :src="item.img"
        v-for="(item, index) in info"
        :key="item.id"
        :class="[`baseimg base${index + 1}`]"
        :id="item.id"
        v-show="!item.isactive"
        :style="{ marginTop: -item.top + 'px', marginLeft: item.left + 'px' }"
        @mousedown="mouseDown($event, item.id)"
      />
    </div>
    <div class="dragtips">
      <span>{{
        active == 0 ? "Drag panel to observe" : "Drag to replace"
      }}</span>
      <img src="@/assets/img/hand.gif" class="hand" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: [
        {
          id: "bc01",
          img: require("@/assets/img/EN/itemH/s1b1.png"),
          tips: "Surface morphology of Galvanized panel after phosphating treatment",
          isactive: false,
          top: 0,
          left: 0,
          disX: 0,
          disY: 0,
          isMove: false,
        },
        {
          id: "bc02",
          img: require("@/assets/img/EN/itemH/s1b2.png"),
          tips: "Surface morphology of Aluminum panel after phosphating treatment",
          isactive: false,
          top: 0,
          left: 0,
          disX: 0,
          disY: 0,
          isMove: false,
        },
        {
          id: "bc03",
          img: require("@/assets/img/EN/itemH/s1b3.png"),
          tips: "Surface morphology of cold-rolled panel after phosphating treatment",
          isactive: false,
          top: 0,
          left: 0,
          disX: 0,
          disY: 0,
          isMove: false,
        },
      ],
      area: [],
      pbox: [],
      active: 0,
      ispc: false,
    };
  },
  created() {
    let ispc = this.IsPC();
    this.ispc = ispc;
  },
  mounted() {
    this.area = this.$refs.table.getBoundingClientRect();
    this.pbox = this.$refs.pbox.getBoundingClientRect();
    // console.log(this.pbox);
  },
  methods: {
    dragStart(e) {
      e.preventDefault();
    },
    dragMove(e, id) {
      e.preventDefault();
      let positionX = 160;
      if (id === "bc02") {
        positionX = 370;
      } else if (id === "bc03") {
        positionX = 600;
      }
      this.info.forEach((item) => {
        if (item.id === id) {
          item.top = -(
            e.touches[0].clientY -
            this.pbox.top -
            this.pbox.height / 2
          );
          item.left = e.touches[0].clientX - positionX;
          // console.log(item.left, item.top);
        }
      });
    },
    dragEnd(e, id) {
      e.preventDefault();
      // 处理当前按钮的状态
      this.info.forEach((item, index) => {
        if (item.id === id) {
          if (this.isEnter(item.left, item.top, id)) {
            item.isactive = true;
            this.active = index + 1;
          } else {
            item.isactive = false;
            item.top = 0;
            item.left = 0;
          }
        }
      });
      // 根据当前按钮的状态处理其他按钮的状态
      this.info.forEach((item, index) => {
        if (item.id !== id) {
          if (this.active !== index + 1) {
            item.isactive = false;
            item.top = 0;
            item.left = 0;
          } else {
            item.isactive = true;
          }
        }
      });
      // console.log("放置区", this.area);
      // console.log("按钮父级", this.pbox);
    },
    // 判断元素是否进入放置区域
    isEnter(nowX, nowY, id) {
      switch (id) {
        case "bc01":
          if (nowX >= 150 && nowX <= 308 && nowY >= 125 && nowY <= 190) {
            return true;
          }
          break;
        case "bc02":
          if (nowX >= -160 && nowX <= 160 && nowY >= 125 && nowY <= 190) {
            return true;
          }
          break;
        case "bc03":
          if (nowX >= -310 && nowX <= -146 && nowY >= 125 && nowY <= 190) {
            return true;
          }
          break;
      }
    },
    IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = new Array(
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      );
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    // pc
    mouseDown(e, id) {
      this.info.forEach((item, index) => {
        if (item.id === id) {
          let el = document.getElementById(id);
          // 计算位置差
          item.disX = e.clientX - el.offsetLeft;
          item.disY = e.clientY - el.offsetTop;
          item.isMove = true;
          document.onmousemove = (e) => {
            if (item.isMove) {
              // 移动时根据鼠标位置计算元素的位置
              let moveX = e.clientX - item.disX;
              let moveY = e.clientY - item.disY;
              // console.log(moveX, moveY);
              // 移动元素
              item.left = moveX;
              item.top = -moveY;
              if (moveX > 140 && moveX < 310 && moveY > -220 && moveY < -140) {
                item.isactive = true;
                this.active = index + 1;
                item.isMove = false;
              } else {
                item.isactive = false;
                item.top = 0;
                item.left = 0;
              }
            }
          };
          document.onmouseup = () => {
            item.isMove = false;
            document.onmousemove = null;
            document.onmouseup = null;
          };
        } else {
          item.isMove = false;
          item.isactive = false;
          item.top = 0;
          item.left = 0;
        }
      });
    },
  },
};
</script>
<style lang="less">
.entestbox {
  font-family: "Helvetica";
  .tips {
    width: 700px;
    font-size: 1.3rem;
    text-align: center;
  }
}
</style>
